<script setup lang="ts">
import { ref } from 'vue'
import type { Comment as CommentType } from '@/apis/methods/comment.api'
import { PhHeart } from '@phosphor-icons/vue'

interface Props {
  reply: CommentType
  submitting?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  submitting: false,
})

const emit = defineEmits<{
  toggleLike: [commentId: string]
  createReply: [parentId: string, content: string, mentionedUsers: string[]]
}>()

const handleToggleLike = () => {
  emit('toggleLike', props.reply.id)
}

const handleCreateReply = (content: string, mentionedUsers: string[] = []) => {
  emit('createReply', props.reply.id, content, mentionedUsers)
}

// 格式化时间
const formatTime = (dateString: string): string => {
  const date = new Date(dateString)
  const now = new Date()
  const diff = now.getTime() - date.getTime()

  const minutes = Math.floor(diff / 60000)
  const hours = Math.floor(diff / 3600000)
  const days = Math.floor(diff / 86400000)

  if (minutes < 1) return '刚刚'
  if (minutes < 60) return `${minutes}分钟前`
  if (hours < 24) return `${hours}小时前`
  if (days < 7) return `${days}天前`

  return date.toLocaleDateString('zh-CN')
}
</script>

<template>
  <div class="reply-item">
    <div class="reply-card bg-base-100 rounded-xl p-4 border border-base-300/30">
      <div class="flex gap-3">
        <!-- 回复头像 -->
        <div class="flex-shrink-0">
          <div
            v-if="reply.author.avatar"
            class="w-8 h-8 rounded-full overflow-hidden border border-base-300"
          >
            <img
              :src="reply.author.avatar"
              :alt="reply.author.name"
              class="w-full h-full object-cover"
            />
          </div>
          <div
            v-else
            class="w-8 h-8 bg-gradient-to-r from-secondary to-accent rounded-full flex items-center justify-center text-secondary-content font-semibold text-sm"
          >
            {{ reply.author.name.charAt(0) }}
          </div>
        </div>

        <!-- 回复内容 -->
        <div class="flex-1 min-w-0">
          <div class="flex items-center gap-2 mb-1">
            <h5 class="font-medium text-base-content text-sm truncate">
              {{ reply.author.name }}
            </h5>
            <time class="text-xs text-base-content/60">{{ formatTime(reply.createdAt) }}</time>
          </div>
          <div class="prose prose-sm max-w-none mb-2">
            <div v-html="reply.content" class="reply-content"></div>
          </div>
          <div class="flex items-center gap-3">
            <button
              @click="handleToggleLike"
              class="flex items-center gap-1 text-xs transition-colors duration-200"
              :class="reply.isLiked ? 'text-red-500' : 'text-base-content/60 hover:text-red-500'"
            >
              <PhHeart :size="12" :class="{ 'ph-fill': reply.isLiked }" />
              {{ reply.likes }}
            </button>
            <button
              class="text-xs text-base-content/60 hover:text-primary transition-colors duration-200"
            >
              回复
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.reply-item {
  animation: fadeInUp 0.2s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reply-card {
  transition: all 0.2s ease;
}

.reply-card:hover {
  background-color: hsl(var(--b2) / 0.5);
}

.reply-content {
  line-height: 1.5;
}

.reply-content :deep(p) {
  margin: 0.25rem 0;
}

.reply-content :deep(code) {
  background: hsl(var(--b2));
  padding: 0.1rem 0.3rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
}

.reply-content :deep(pre) {
  background: hsl(var(--b2));
  padding: 0.5rem;
  border-radius: 0.25rem;
  overflow-x: auto;
  margin: 0.5rem 0;
  font-size: 0.75rem;
}
</style>
